<template>
    <div class="div-asider">
      <el-menu
        class="el-menu-vertical-demo"
        style="border-right: 1px;"
      >

      <el-menu-item 
      v-for="item in noChildrenMenus"
      :key="item.path"
      :index="item.path"
      @click="() => router.push(item.path)"

      >
        <el-icon><component :is="item.icon" /></el-icon>
        <span>{{ item.title }}</span>
      </el-menu-item>




      <el-sub-menu 
      v-for="item in hasChildrenMenus"
      :key="item.path"
      :index="item.path"

      >
          <template #title>
            <el-icon><setting /></el-icon>
            <span>{{ item.title }}</span>
          </template>

          <el-menu-item-group>
            <el-menu-item 
            v-for="subItem in item.children"
            :key="subItem.path"
            :index="subItem.path"
            @click="() => router.push(subItem.path)"
            >
            <el-icon><component :is="subItem.icon" /></el-icon>
            <span>{{ subItem.title }}</span>


            </el-menu-item>
          </el-menu-item-group>

        </el-sub-menu>

      </el-menu>

    </div>
    
</template>
    
<script setup>
import { computed, ref } from 'vue'
import {useRouter,useRoute} from 'vue-router'
import {useUserStore} from '@/stores/userStores'

const userStrore = useUserStore()


//js 函数形式 跳转 
const router = useRouter()
const route = useRoute()

const userInfo = userStrore.getUserInfo()


const menus = ref([{
    title: '控制面板',
    path: '/index',
    icon: 'House',
    role: ['admin','student','teacher']
},
{
    title: '用户管理',
    path: '/user',
    icon: 'User',
    role: ['admin','teacher']
},
{
    title: '图书管理',
    path: '/book',
    icon: 'Document',
    role: ['admin','teacher']
},
{
    title: '借阅管理',
    path: '/borrow',
    icon: 'CreditCard',
    role: ['admin','student']
},
{
    title: '系统设置',
    path: '',
    role: ['admin'],
    children: [
        {title:'设置1',path:'/setting',icon:'Setting'},
        {title:'设置2',path:'/setting',icon:'Setting'}
    ]

}])


const noChildrenMenus = computed(() => 
          menus.value.filter(item => !item.children && item.role.includes(userInfo.role)) )


const hasChildrenMenus = computed(() =>
 menus.value.filter(item => item.children && item.role.includes(userInfo.role)))






</script>

<style scoped>
.div-asider{
    width: 200px;
    height: 1000vh;
    
}
</style>